<template>
    <div class="chart-box" ref="chartBox" :style="'width: ' + width + 'px; height: ' + height + 'px;'">
        <div id="main"></div>
        <el-icon>
            <FullScreen @click="fullScreen" />
        </el-icon>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, watch, reactive } from 'vue';
import ElementResize from 'element-resize-detector'
const emit = defineEmits('fullScreen')

let props = defineProps({
    width: {
        type: Number,
        default: 500
    },
    height: {
        type: Number,
        default: 400
    },
    timeLineList: {
        type: Array,
        default: null
    },
    dataList: {
        type: Array,
        default: null
    }
})

watch(() => props.timeLineList, (val, old) => {
    /* console.log('新值：', val)
    console.log('旧值：', old) */
    myChart.setOption(option)
}, { deep: true, immediate: false }) // 深度监听，并且立刻执行一次)

let chartBox = ref(null)
const fullScreen = () => {
    emit('fullScreen')
}

let myChart = null;
let option = null;
const loadChart = () => {
    let chartDom = document.getElementById('main');
    myChart = echarts.init(chartDom);

    option = {
        animation: false,
        // animationThreshold: 2000,
        // animationDuration: 2000,
        title: {
            text: '标题信息'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['实时流量', '实时流量演进']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: [
                    '6-01', '6-02', '6-03', '6-04', '6-05', '6-06', '6-07',
                    '6-08', '6-09', '6-10', '6-11', '6-12', '6-13', '6-14',
                    '6-15', '6-16', '6-17', '6-18', '6-19', '6-20', '6-21',
                    '6-22', '6-23', '6-24', '6-25', '6-26', '6-27', '6-28',
                ]
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '实时流量',
                type: 'line',
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                areaStyle: {},
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#DDDDFF' // 起始颜色
                            },
                            {
                                offset: 1,
                                color: '#FFFFFF' // 结束颜色
                            }
                        ]
                    }
                },
                data: props.dataList,
                lineStyle: {
                    type: 'dotted'
                }
            },
            {
                name: '实时流量演进',
                type: 'line',
                smooth: true,
                smoothMonotone: 'x,y',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: props.timeLineList,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#c76911' // 起始颜色
                            },
                            {
                                offset: 1,
                                color: '#F7E7D8' // 结束颜色
                            }
                        ]
                    }
                },
                lineStyle: {
                    color: '#FF0',
                    width: 2,
                },
                animation: true,
                animationDuration: 1000,
                animationDurationUpdate: 1000,
                animationEasingUpdate: 'linear'
            }
        ]
    };

    option && myChart.setOption(option);
}

// 重新渲染图表
const ResizeEChart = () => {
    myChart.resize({
        animation: {
            duration: 500
        }
    })
}

const elementResize = ElementResize({
    strategy: 'scroll',
    callOnAdd: true
})

let i = 0;
onMounted(() => {
    loadChart()
    // 监听容器resize 缩放图表
    elementResize.listenTo(chartBox.value, ResizeEChart)
})

defineExpose({
    loadChart,
    ResizeEChart
})
</script>

<style lang="scss" scoped>
.chart-box {
    position: relative;
    background-color: white;
    padding: 10px;

    #main {
        width: 100%;
        height: 100%;
    }

    .el-icon {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
    }
}

.full-class {
    width: calc(100vw - 40px) !important;
    height: calc(100vh - 105px) !important;

    #main {
        width: 100%;
        height: 100%;
    }
}
</style>